<!--  -->
<script setup>

import SimpleInput from '@/components/input/SimpleInput.vue'
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import { feedbackAPI, getCountAPI } from '@/apis/feedback'
import { ref, onMounted } from 'vue'
import { useToast } from 'vue-toastification'

import { useBreadsStore } from '@/stores'
import Checkbox from '@/components/input/Checkbox.vue'
import Info from '@/components/Info.vue'
const { setBreadCrumbs } = useBreadsStore()

setBreadCrumbs([
  { title: 'feedback', path: '/article/feedback' },
])

const feedbackForm = ref({
  email: '',
  name: '',
  content: '',
  isPublic: ''
})

const count = ref(0)

onMounted(() => {
  getCountAPI().then(res => {
    count.value = res.data
  })
})

const sending = ref(false)

function handleSubmit() {
  const toast = useToast()

  if (sending.value) {
    toast.warning('正在发送中，请稍后')
    return
  }

  sending.value = true

  if (!feedbackForm.value.name || !feedbackForm.value.content) {
    toast.warning('昵称和内容不能为空')
    return
  }

  feedbackAPI(feedbackForm.value).then(res => {
    toast.success(res.data)
    _resetForm()
    count.value += 1
  }).catch(err => {
    toast.error('发送失败，因为：' + err.message)
  }).finally(() => {
    sending.value = false
  })

  function _resetForm() {
    Object.keys(feedbackForm.value).forEach(key => feedbackForm.value[key] = '')
  }
}

const textarea = ref(null)

function fitH() {
  textarea.value.style.height = Math.min(_getTextareaActualHeight(textarea.value), 500) + 'px'

  function _getTextareaActualHeight(el) {
    const clone = document.createElement('textarea')
    clone.style.position = 'absolute'
    clone.style.visibility = 'hidden' // 隐藏
    clone.style.width = el.offsetWidth + 'px' // 设置宽度
    clone.style.font = getComputedStyle(el).font // 复制字体样式
    clone.value = el.value // 复制内容

    document.body.appendChild(clone) // 添加到文档中
    const height = clone.scrollHeight // 获取 scrollHeight
    document.body.removeChild(clone) // 移除克隆的 textarea

    return height + 40 // 返回实际高度 
  }
}

</script>

<template>
  <div class="views-wrapper">
    <div class="view-header">
      <div class="view-title">Feedback</div>
      <div class="view-subtitle">~</div>
    </div>
    <div class="centre-text">
      填写下面的表单，留言或给出建议
    </div>
    <div class="centre-text">
      已收到 {{ count }} 份
    </div>
    <div class="form">
      <SimpleInput label="邮箱" v-model="feedbackForm.email" placeholder="可以不填" />
      <SimpleInput label="昵称" v-model="feedbackForm.name" placeholder="" />
      <textarea ref="textarea" @keyup="fitH" class="box-input" v-model="feedbackForm.content" placeholder="填写什么吧~"></textarea>
      <div class="box-op">
        <div class="box-left">
          <Info>可能会在后续的新模块中展示</Info>
          <Checkbox label="允许公开" v-model="feedbackForm.isPublic" />
        </div>
        <SubmitBtn :onClick="handleSubmit">提交</SubmitBtn>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.views-wrapper {
  flex: 1;
  margin: 50px auto;
  width: 85%;
  background-color: var(--view-category-bgc);
  box-shadow: 0px 4px 7px rgba(37, 44, 24, 0.427);
  border: 1px solid var(--border-primary);

  @media screen and (max-width: 768px) {
    width: 98%;
  }
}


.view-header {
  margin: 10px 0 20px;
  padding-bottom: 10px;
  background: var(--view-article-title-bgc);
  box-shadow: 0px 4px 4px rgba(32, 35, 36, 0.486);
}

.view-title {
  padding-top: 10px;
  padding-bottom: 0px;
  font-family: "Oswald", "Bookman Old Style", serif;
  font-size: 2.50rem;
  letter-spacing: 0.12rem;
  width: max-content;
  margin: auto;
  color: #00250d;
  border-bottom: 1px solid #00250d;
}

.view-subtitle {
  font-family: Roboto, inherit "Merienda", sans-serif;
  font-weight: 400;
  font-size: .75rem;
  color: #719475;
  letter-spacing: 0.100rem;
  margin: auto;
  width: max-content;
}


.form {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}

.box-input {
  padding: 10px;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  outline: none;
  font-size: 14px;
  font-family: "Oswald", "Bookman Old Style", serif;
  font-weight: 400;
  color: #333;
  background-color: var(--bgc-02);
  min-width: 290px;
  min-height: 100px;

  &:hover,
  &:focus {
    border-color: var(--border-primary);
  }

  &:focus {
    box-shadow: 0 0 3px #9f8f006a;
  }
}

.box-op {
  padding-bottom: 10px;
  width: 290px;
  display: flex;
  justify-content: space-between;
  font-weight: 300;

  .box-left {
    display: flex;
    line-height: 100%;
    gap: 5px;
    margin: auto 0;
  }
}

.op-submit {
  width: auto;
  height: auto;
  border-width: 0;
  cursor: pointer;
  color: #fff;
  background-color: #348c53;
  font-weight: 300;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 5px 17px;
  font-size: 13px;
  border-radius: 4px;
  outline: none;
  transition: all .3s;
}
</style>
